<template>
    <div class="login-container">
        <!-- 背景图片（带视差效果） -->
        <div class="bg-image" :style="{ backgroundImage: `url(${bgUrl})` }" ref="bgImage"></div>

        <!-- 登录表单区域 -->
        <div class="login-form">
            <h2 class="title">手机号登录</h2>

            <!-- 手机号+验证码表单 -->
            <el-form :model="formData" label-width="80px" class="form-item">
                <el-form-item>
                    <el-input v-model="phone" placeholder="请输入手机号" prefix-icon="el-icon-phone" type="number"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="code" type="number" placeholder="请输入验证码" prefix-icon="el-icon-key"
                        :disabled="isLoading || !phone">
                        <template #append>
                            <el-button :disabled="countdown > 0 || !phone || isLoading" @click="sendCode">
                                {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
                            </el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="login-btn" :disabled="!phone || !code || isLoading">
                        {{ isLoading ? '登录中...' : '立即登录' }}
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 注册引导 -->
            <div class="register-tip">
                还没有账号？<el-link @click="handleRegister">立即注册</el-link>
            </div>

            <!-- 登录方式切换 -->
            <div class="phone-login-tip">
                <el-link @click="handleAccountLogin" class="phone-login-link">
                    <i class="el-icon-user"></i> 账号密码登录
                </el-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import http from '@/http';

// 背景图片地址
const bgUrl = 'https://ts1.tc.mm.bing.net/th/id/R-C.e3343aa8e6874c4b3703f98fcdbbe3e1?rik=%2bWpBT4qQo4iDSw&riu=http%3a%2f%2fimage.glwsq.cn%2f201910%E5%A3%81%E7%BA%B8_e4790325e7b13f3df8fc8967b1698cdc&ehk=qHUodgesM8g%2b%2fIG3qfehLkM7MQMswVIVZPIINXu3KBE%3d&risl=&pid=ImgRaw&r=0';

// 独立的ref变量
const phone = ref('');
const code = ref('');
const countdown = ref(0);
const isLoading = ref(false);
const router = useRouter();

const formData = reactive({});

const sendCode = () => {
    http.post('smscode/', { phone: phone.value })
        .then((resp) => {
            if (resp.status === 200) {
                ElMessage.success('验证码已发送');
                startCountdown();
            } else {
                ElMessage.error('验证码发送失败');
            }
        })
        .catch((error) => {
            console.error('验证码请求错误:', error);
            ElMessage.error('网络异常，请稍后重试');
        });
};

// 启动倒计时
const startCountdown = () => {
    countdown.value = 60;
    const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
            clearInterval(timer);
        }
    }, 1000);
};

// 导航功能
const handleAccountLogin = () => {
    ElMessage.info('正在跳转至账号密码登录');
    router.push('/clogin');
};

const handleRegister = () => {
    router.push('/register');
};

// 背景视差效果
let isDragging = false;
let startY = 0;

const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
        const deltaY = e.clientY - startY;
        bgImageRef.value!.style.backgroundPositionY = `${deltaY * 0.8}px`;
        startY = e.clientY;
    }
};

const handleMouseDown = (e: MouseEvent) => {
    isDragging = true;
    startY = e.clientY;
    document.addEventListener('mousemove', handleMouseMove);
};

const handleMouseUp = () => {
    isDragging = false;
    document.removeEventListener('mousemove', handleMouseMove);
};

const bgImageRef = ref<HTMLDivElement>();

watch(() => bgImageRef.value, (el) => {
    if (el) {
        el.addEventListener('mousedown', handleMouseDown);
        el.addEventListener('mouseup', handleMouseUp);
    }
});
</script>

<style scoped lang="scss">
.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #0a192f;
    /* 深色背景 */
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
    /* 背景图变暗 */
    transition: background-position 0.3s ease;
    /* 视差动画过渡 */
}

.login-form {
    position: relative;
    z-index: 10;
    width: 400px;
    padding: 40px;
    margin: 50px auto;
    background: rgba(10, 25, 47, 0.9);
    /* 半透明深色容器 */
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* 立体阴影 */

    .title {
        color: #fff;
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 500;
    }

    .form-item {
        margin-bottom: 20px;

        .el-input {
            /* 定制输入框样式 */
            --el-input-bg-color: rgba(255, 255, 255, 0.1);
            /* 透明背景 */
            --el-input-text-color: #fff;
            /* 白色文字 */
            --el-input-border-color: rgba(255, 255, 255, 0.2);
            /* 浅色边框 */
            --el-input-hover-border-color: rgba(255, 255, 255, 0.3);
            /* 悬停时边框变亮 */
            --el-input-focus-border-color: #409eff;
            /* 聚焦时蓝色边框 */

            input {
                color: #fff;
                /* 确保输入文字颜色 */
            }
        }
    }

    .login-btn {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
    }

    .register-tip,
    .phone-login-tip {
        color: #fff;
        text-align: center;
        margin-top: 20px;

        .el-link {
            color: #409eff;
            /* 蓝色链接 */
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            /* 颜色过渡动画 */

            &:hover {
                color: #66b1ff;
                /* 悬停时更亮的蓝色 */
            }
        }
    }

    /* 验证码按钮样式 */
    .el-input__append button {
        color: #409eff;
        background: transparent;
        border: none;
        padding: 0 12px;
        font-size: 14px;

        &:disabled {
            color: rgba(255, 255, 255, 0.5);
            /* 禁用时文字变灰 */
            cursor: not-allowed;
        }
    }

    /* 切换登录方式链接样式 */
    .phone-login-link {
        display: inline-flex;
        align-items: center;
        opacity: 0.8;
        transition: opacity 0.3s;
        /* 透明度过渡 */

        i {
            margin-right: 5px;
        }

        &:hover {
            opacity: 1;
            /* 悬停时完全不透明 */
        }
    }
}

/* 响应式设计：手机端适配 */
@media (max-width: 768px) {
    .login-form {
        width: 90%;
        max-width: 360px;
        padding: 30px;
        margin: 30px auto;
    }
}
</style>
